<template>
  <div>
    <van-pull-refresh
      v-model="product.refreshing"
      @refresh="onRefresh"
      :disabled="disabled"
    >
      <div>
        <van-sticky :offset-top="1">
          <div id="header" class="aui-bg-red aui-padded-10"></div>
        </van-sticky>
        <div id="main">
          <div style="position: fixed; left: 0; top: 20px; z-index: 999">
            <div
              id="back"
              class="back aui-text-center aui-padded-15 aui-padded-t-0"
            >
              <div class="back-cont aui-bg-red aui-margin-t-10" @click="back">
                <i class="iconfont icon-fanhui aui-text-f aui-ftn16"></i>
              </div>
            </div>
          </div>
          <div v-if="!product.isTotal" v-cloak>
            <div class="banner">
              <div id="aui-slide" class="slider_m">
                <div
                  class="slide-img"
                  :style="{ backgroundImage: `url(${good.image})` }"
                >
                  <div class="all-red" v-if="good.all_red > 0">
                    <i class="iconfont icon-zijin"></i>
                    <span>+{{ good.all_red }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="content aui-bg-f">
              <div class="top aui-padded-10">
                <div class="name aui-ftn14 aui-text-3">
                  <img
                    src="../../assets/tb_icon.png"
                    alt=""
                    v-if="good.downtype == 1"
                  />
                  <img
                    src="../../assets/tm_icon.png"
                    alt=""
                    v-if="good.downtype == 2"
                  />
                  <img
                    src="../../assets/jd_icon.png"
                    alt=""
                    v-if="good.downtype == 3"
                  />
                  <img
                    src="../../assets/pdd_icon.png"
                    alt=""
                    v-if="good.downtype == 4"
                  />
                  <img
                    src="../../assets/al_icon.png"
                    alt=""
                    v-if="good.downtype == 5"
                  />
                  <img
                    src="../../assets/dou_icon.png"
                    alt=""
                    v-if="good.downtype == 6"
                  />
                  <img
                    src="../../assets/kuai_icon.png"
                    alt=""
                    v-if="good.downtype == 7"
                  />
                  <img
                    src="../../assets/taobaotj_icon.png"
                    alt=""
                    v-if="good.downtype == 8"
                  />
                  <div
                    class="aui-ellipsis-2 aui-padded-l-5"
                    v-text="good.name"
                  ></div>
                </div>
                <div class="bb">
                  <van-row type="flex" align="center">
                    <van-col>
                      <span class="aui-ftn12 aui-text-7">活动ID</span
                      ><span
                        class="aui-ftn18 aui-text-red aui-padded-r-5"
                        v-text="good.id"
                      ></span>
                      <span
                        style="background-color: #ffc107; border-radius: 2px;padding: 2px 3px"
                        class="
                  aui-text-f aui-ftn12
                "
                        id="goodId"
                        data-clipboard-action="copy"
                        :data-clipboard-text="good.id"
                        @click="fnCopyText('#goodId')"
                      >
                        复制
                      </span>
                    </van-col>
                    <van-col>
                      <span class="aui-ftn12 aui-text-7 aui-padded-l-5"
                        >下单￥</span
                      ><span
                        class="aui-ftn18 aui-text-red"
                        v-text="good.price"
                      ></span>
                    </van-col>
                    <van-col v-if="good.type == 2">
                      <span class="aui-ftn12 aui-text-7 aui-padded-l-5"
                        >折扣价￥</span
                      ><span
                        class="aui-ftn18 aui-text-red"
                        v-text="(good.price - good.back_price).toFixed(2)"
                      ></span>
                    </van-col>
                  </van-row>
                </div>
              </div>
              <div class="bottom">
                <van-row class="aui-padded-b-10">
                  <van-col span="8">
                    <span class="aui-ftn12 aui-text-7">剩余</span>&nbsp;<span
                      class="aui-ftn14 aui-text-3"
                      >{{ good.exitnum }}份</span
                    >
                  </van-col>
                  <van-col span="8">
                    <span class="aui-ftn12 aui-text-7">总数</span>&nbsp;<span
                      class="aui-ftn14 aui-text-3"
                      >{{ good.num }}份</span
                    >
                  </van-col>
                </van-row>
                <van-row class="aui-padded-b-10">
                  <van-col span="8">
                    <span class="aui-ftn12 aui-text-7">申请</span>&nbsp;<span
                      class="aui-ftn14 aui-text-3"
                      >{{ good.hot }}人</span
                    >
                  </van-col>
                  <van-col span="8">
                    <span class="aui-ftn12 aui-text-7">通过</span>&nbsp;<span
                      class="aui-ftn14 aui-text-3"
                      >{{ good.pass }}人</span
                    >
                  </van-col>
                  <van-col span="8">
                    <span class="aui-ftn12 aui-text-7">试用</span>&nbsp;<span
                      class="aui-ftn14 aui-text-3"
                      >{{ good.finish }}人</span
                    >
                  </van-col>
                </van-row>
                <div class="tag" v-cloak>
                  <div
                    class="aui-label aui-label-danger aui-margin-r-5"
                    v-for="(item, index) in good.label"
                    v-text="item"
                    :key="index"
                  ></div>
                </div>
              </div>
              <!-- <van-row
                class="aui-padded-10 aui-margin-b-10"
                style="border-top: 1px solid #eee"
              >
                <van-col :span="12" class="aui-ftn12 aui-text-7">
                  宝贝评价
                  <span>({{ good.count }})</span>
                </van-col>
                <van-col
                  :span="12"
                  class="aui-ftn12 aui-text-red aui-text-right"
                  @click="fnOpenComment"
                >
                  查看全部
                  <i class="iconfont icon-qianjin aui-ftn13"></i>
                </van-col>
              </van-row> -->
            </div>
            <div class="tab aui-bg-f">
              <div class="tab_top">
                <van-row class="aui-text-center">
                  <van-col
                    span="12"
                    class="item aui-ftn14 aui-text-7"
                    v-bind:class="{ active: tab.cur == 0 }"
                    @click="tab.cur = 0"
                    v-cloak
                  >
                    试用详情
                  </van-col>
                  <van-col
                    span="12"
                    class="item aui-ftn14 aui-text-7"
                    v-bind:class="{ active: tab.cur == 1 }"
                    @click="tab.cur = 1"
                    v-cloak
                  >
                    试用记录
                  </van-col>
                </van-row>
              </div>
              <div class="tab_cont">
                <div class="tab_desc api-padded-10" v-if="tab.cur == 0" v-cloak>
                  <div class="aui-padded-15" v-if="product.isLogin" v-cloak>
                    <div
                      class="title aui-text-red aui-font-weight aui-padded-b-5"
                    >
                      试用流程
                    </div>
                    <div class="desc aui-text-7">
                      1、申请试用。<br />
                      2、获得试用资格。 <br />
                      3、按要求以<span
                        class="aui-text-red"
                        v-text="good.price"
                      ></span
                      >元购买 ，下单后立即回到极客试用填写订单号 <br />
                      4、完成交易 → 给予评价，来极客试用填写试用报告。<br />
                      5、报告通过后返款<span
                        class="aui-text-red"
                        v-text="good.back_price"
                      ></span
                      >元到您极客试用账号中，试用完成。<br /><br />
                    </div>

                    <div
                      class="title aui-text-red aui-font-weight aui-padded-b-5"
                    >
                      试用要求
                    </div>
                    <div class="desc aui-text-7">
                      1、必须用申请试用的买号去下单购买。<br />
                      <span class="aui-text-red"
                        >2、必须是您本人签收，并拍了包裹订单信息图后才可去提交试用报告。<br
                      /></span>
                      3、禁止秒拍，需按要求浏览商品后再下单。<br />
                      4、禁止使用信用卡、淘金币、集分宝、分期付款、朋友代付、淘宝客等方式付款。<br />
                      5、试客不享受商家店铺所有优惠活动。<br />
                    </div>
                  </div>

                  <div class="sign aui-bg-f" v-if="!product.isLogin" v-cloak>
                    <van-row>
                      <van-col span="12">
                        <div
                          class="
                            login_btn
                            aui-ftn14 aui-text-red aui-text-center
                          "
                          @click="fnOpenLogin"
                        >
                          登录
                        </div>
                      </van-col>
                      <van-col span="12">
                        <div
                          class="
                            register_btn
                            aui-ftn14 aui-text-f aui-bg-red aui-text-center
                          "
                          @click="fnOpenRegister"
                        >
                          注册
                        </div>
                      </van-col>
                    </van-row>
                  </div>
                </div>
                <div class="tab_record" v-if="tab.cur == 1" v-cloak>
                  <van-row v-if="users.length > 0" v-cloak>
                    <van-col
                      span="6"
                      v-for="(item, index) in users"
                      :key="index"
                      v-cloak
                    >
                      <div class="item">
                        <div
                          class="avatar"
                          v-bind:style="{
                            backgroundImage: 'url(' + item.avatar + ')',
                          }"
                        ></div>
                        <div
                          class="
                            aui-padded-t-5
                            name
                            aui-ftn12 aui-text-7 aui-text-center aui-ellipsis-1
                          "
                          v-text="item.nickname"
                        ></div>
                      </div>
                    </van-col>
                  </van-row>
                  <div v-else>
                    <div class="no-data aui-bg-f aui-text-center aui-text-9">
                      <i class="iconfont icon-lujing1161"></i>
                      <div class="aui-ftn16">空空如也~</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <!-- directives v-image -->
          <!-- <img :src="defaultImage" v-image="good.image" alt=""> -->
        </div>
        <div v-if="!product.isTotal" v-cloak>
          <div class="fixed aui-bg-f" id="fixed" style="bottom: 0">
            <div class="content">
              <van-row>
                <van-col span="16" class="aui-ftn14 aui-text-f btn lt">
                  商家已存{{ good.total }}元保证金
                </van-col>
                <van-col
                  span="8"
                  class="aui-btn aui-btn-danger aui-ftn16 btn"
                  @click="fnApply"
                  v-if="!good.exittime && !product.is_applyed"
                  v-cloak
                >
                  我要申请
                </van-col>
                <van-col
                  span="8"
                  class="aui-btn aui-btn-warning aui-ftn16 btn"
                  @click="fnOpenSyDetail(good.order_id)"
                  v-if="!good.exittime && product.is_applyed"
                  >试用详情</van-col
                >
                <van-col
                  span="8"
                  class="aui-text-f aui-text-center aui-ftn16 time_btn"
                  v-else-if="good.exittime"
                  v-cloak
                >
                  <van-count-down
                    :time="good.exittime * 1000"
                    @finish="fnGetGoodData"
                  />
                </van-col>
              </van-row>
            </div>
          </div>
          <!-- 选择淘宝帐号 -->
          <div
            class="sz_taobao"
            v-if="product.isLogin && product.isApply"
            v-cloak
          >
            <div class="bg"></div>
            <div class="sz_taobao_content">
              <div class="title aui-text-center aui-text-f aui-bg-red">
                <span class="aui-ftn14">选择</span>
                <span
                  class="aui-ftn16"
                  v-text="downtypes[good.downtype]"
                ></span>
                <span class="aui-ftn14">帐号</span>
              </div>
              <div class="content aui-bg-f aui-padded-10">
                <div
                  class="choose-item aui-padded-b-5 aui-padded-t-5"
                  v-for="(item, index) in good.buynum"
                  :key="index"
                  @click="select_user = item"
                >
                  <van-row class="aui-text-red">
                    <van-col span="20">
                      <span class="aui-ftn16" v-text="item.username"> </span>
                      <div class="aui-ftn12" v-text="item.text"></div>
                    </van-col>
                    <van-col
                      span="4"
                      class="aui-text-right"
                      v-if="item.id == select_user.id"
                      v-cloak
                    >
                      <i class="iconfont icon-gou aui-ftn12"></i>
                    </van-col>
                  </van-row>
                </div>
                <button
                  class="
                    add_btn
                    aui-text-f aui-ftn14 aui-bg-red aui-text-center
                  "
                  style="border: 0"
                  @click="fnOpenAddUser"
                >
                  +添加买号
                </button>
                <div class="txt aui-ftn12 aui-text-9 aui-padded-t-10">
                  1、请用申请的买号下单，否则锁定试客账号！<br />
                  2、每个买号：近30天限做{{ good.month_num }}单，近7天限做{{
                    good.week_num
                  }}单
                </div>
              </div>
              <div class="bb aui-text-center">
                <van-row>
                  <van-col
                    span="12"
                    class="btn aui-text-f aui-ftn16 aui-bg-red confirm_btn"
                    @click="fnSelectUser"
                  >
                    确定
                  </van-col>
                  <van-col
                    span="12"
                    class="btn aui-text-7 aui-ftn16 aui-bg-f close_btn"
                    @click="fnApply"
                  >
                    关闭
                  </van-col>
                </van-row>
              </div>
            </div>
          </div>
          <!-- 首次试用 -->
          <div class="sz_taobao" v-if="code.first_input" v-cloak>
            <div class="bg"></div>
            <div class="sz_taobao_content">
              <div class="title aui-text-center aui-text-f aui-bg-red">
                <span class="aui-ftn14">首次申请试用,请填写验证码</span>
              </div>
              <div
                class="
                  content
                  aui-bg-f aui-padded-10 aui-padded-t-15 aui-padded-b-15
                "
              >
                <van-row>
                  <van-col span="16">
                    <input
                      type="text"
                      name="verify"
                      v-model="code.yzm"
                      placeholder="验证码"
                      class="aui-padded-l-10 aui-ftn14"
                      style="
                        width: 90% !important;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        height: 22px;
                        line-height: 22px;
                      "
                    />
                  </van-col>
                  <van-col span="8">
                    <div
                      class="aui-btn aui-ftn13"
                      @click="fnVerify"
                      v-bind:class="{
                        'aui-btn-danger': !code.isSet,
                        'aui-btn-primary': code.isSet,
                      }"
                      v-cloak
                    >
                      {{ code.verify }}
                    </div>
                  </van-col>
                </van-row>
              </div>
              <div class="bb aui-text-center">
                <van-row>
                  <van-col
                    span="12"
                    class="btn aui-text-f aui-ftn16 aui-bg-red confirm_btn"
                    @click="fnInputYmz"
                  >
                    确定
                  </van-col>
                  <van-col
                    span="12"
                    class="btn aui-text-7 aui-ftn16 aui-bg-f close_btn"
                    @click="code.first_input = false"
                  >
                    关闭
                  </van-col>
                </van-row>
              </div>
            </div>
          </div>
        </div>
        <div v-if="product.isTotal" v-cloak>
          <div class="no-data aui-text-center aui-text-9">
            <i class="iconfont icon-lujing1161"></i>
            <div class="aui-ftn15" v-text="product.no_data"></div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import Product from "../../service/product.js";
import sign from "../../service/sign.js";
export default {
  data() {
    return {
      isLoading: true,
      headerH: 0,
      timer: null,
      img: "../../image/l1.png",
      defaultImage: require("../../assets/index/loading-image.png"),
      tab: {
        cur: 0,
        desc: "",
        items: [],
      },
      users: [],
      select_user: {},
      product: {
        isRz: false,
        isApply: false,
        isLogin: false,
        time: 0,
        is_applyed: false,
        isTotal: false,
        no_data: "",
        refreshing: false,
        is_first: false,
      },
      code: {
        isSet: false,
        verify: "发送短信",
        yzm: "",
        first_input: false,
      },
      good: {},
      disabled: false,
      downtypes: {
        1: "淘宝天猫阿里",
        2: "淘宝天猫阿里",
        5: "淘宝天猫阿里",
        3: "京东",
        4: "拼多多",
        6: "抖音",
        7: "快手",
        9: "拼多多商家版",
      }
    };
  },
  directives: {
    image: function(el, binding) {
      let observer = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          observer.unobserve(el);
        } else {
          el.setAttribute("src", binding.value);
        }
      });
      observer.observe(el);
    },
  },
  mounted() {
    this.init();
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      this.disabled = this.utils.handleScroll();
    },
    onRefresh() {
      setTimeout(() => {
        this.product.refreshing = false;
        this.init();
      }, 1000);
    },
    init: function() {
      this.product.isLogin = this.$store.state.uid ? true : false;
      this.fnGetGoodData();
      this.fnGetRecord();
    },
    // get good data
    fnGetGoodData: function() {
      //   113889
      Product.fnGetGoodData({
        id: this.$route.params.id,
        uid: this.$store.state.uid ? this.$store.state.uid : "",
        isToken: this.$store.state.uid ? true : false,
      }).then((res) => {
        this.isLoading = false;
        if (res && res.status) {
          this.good = res.data;
          this.product.is_first = this.good.is_first;
          if (this.good.order_id) this.product.is_applyed = true;
          this.product.isRz = this.good.is_auth;
          this.select_user =
            this.good.buynum.length > 0 ? this.good.buynum[0] : {};
          this.product.time = this.good.exittime;
        } else {
          this.product.isTotal = true;
          this.product.no_data = res.msg;
        }
      });
    },
    // 试用记录
    fnGetRecord: function() {
      Product.fnGetRecord({ goods_id: this.$route.params.id }).then((res) => {
        if (res) {
          if (res.status) {
            this.users = res.data;
          }
        }
      });
    },
    // 预览图片
    fnPreview: function(path) {
      this.utils.fnPreviewPic([path]);
    },
    fnOpenLogin: function() {
      this.utils.fnOpenCommon(this, {
        name: "login",
        query: { from: "product", active: 0 },
        params: { id: this.$route.params.id },
      });
    },
    fnOpenRegister: function() {
      this.utils.fnOpenCommon(this, {
        name: "login",
        query: { from: "product", active: 1 },
        params: { id: this.$route.params.id },
      });
    },
    // 发送短信
    fnVerify: function() {
      if (!this.code.isSet) {
        sign.fnSendMsg({ mobile: this.$store.state.username }).then((res) => {
          if (res) {
            this.utils.fnMsg(res.msg);
            if (res.status) {
              this.setTime(60);
            }
          }
        });
      }
    },
    /*
     * 倒计时
     */
    setTime: function(time) {
      if (time > 0) {
        this.code.isSet = true;
        this.code.verify = time + "秒后再试";
        time = time - 1;
        var vm = this;
        setTimeout(function() {
          vm.setTime(time);
        }, 1000);
      } else {
        this.code.isSet = false;
        this.code.verify = "发送短信";
      }
    },
    // 首次申请试用
    fnInputYmz: function() {
      var vm = this;
      if (this.code.yzm) {
        Product.verifyCheck({
          uid: this.$store.state.uid,
          verify: this.code.yzm,
          isToken: true,
        }).then((res) => {
          if (res) {
            this.utils.fnMsg(res.msg);
            if (res.status) {
              setTimeout(function() {
                vm.product.isApply = !vm.product.isApply;
                vm.product.is_first = false;
                vm.code.first_input = !vm.code.first_input;
              }, 2000);
            }
          }
        });
      } else {
        this.utils.fnMsg("请输入验证码");
      }
    },
    fnApply: function() {
      if (this.product.isLogin && this.$store.state.uid) {
        if (this.product.isRz) {
          if (this.product.is_first) {
            this.code.first_input = !this.code.first_input;
          } else {
            this.product.isApply = !this.product.isApply;
          }
        } else {
          this.utils.fnMsg("请先实名认证");
          var vm = this;
          setTimeout(function() {
            vm.utils.fnOpenCommon(vm, {
              name: "rz",
              query: { title: "实名认证" },
            });
          }, 2000);
        }
      } else {
        this.utils.fnMsg("请先登录");
        var vm = this;
        setTimeout(function() {
          vm.fnOpenLogin();
        }, 2000);
      }
    },
    // 选择淘宝帐号
    fnSelectUser: function() {
      if (!this.select_user.id) {
        this.$dialog.alert({
          message: `请选择${this.downtypes[this.good.downtype]}帐号`,
        });
      } else {
        this.fnApply();
        Product.fnApplyData({
          goods_id: this.$route.params.id,
          uid: this.$store.state.uid,
          buynum: this.select_user.username,
          isToken: true,
        }).then((data) => {
          if (!data) {
            this.$dialog.alert({
              message: "网络错误,请稍候再试！",
            });
            return false;
          }
          if (data) {
            this.utils.fnMsg(data.msg);
            if (data.status) {
              this.product.is_applyed = true;
              this.good.order_id = data.order_id;
            }
          }
        });
      }
    },
    fnOpenAddUser: function() {
      let types = {
        1: 0,
        2: 0,
        5: 0,
        3: 1,
        4: 2,
        6: 3,
        7: 4,
        9: 5,
      };
      this.utils.fnOpenCommon(this, {
        name: "add_user",
        query: { type: types[this.good.downtype], title: "添加买号", name: this.downtypes[this.good.downtype] },
      });
    },
    // 打开试用详情
    fnOpenSyDetail: function() {
      if (this.good.type < 5) {
        this.utils.fnOpenCommon(this, {
          name: "sy_record_detail",
          params: { order_id: this.good.order_id },
        });
      } else {
        this.utils.fnOpenCommon(this, {
          name: "dou_record_detail",
          params: { order_id: this.good.order_id },
        });
      }
    },
    //   打开评价
    fnOpenComment() {
      if (this.product.isLogin && this.$store.state.uid) {
        this.utils.fnOpenCommon(this, {
          name: "product_comment_list",
          params: { goodsId: this.good.id },
        });
      } else {
        this.utils.fnMsg("请先登录");
        var vm = this;
        setTimeout(function() {
          vm.fnOpenLogin();
        }, 2000);
      }
    },
    // 复制
    fnCopyText: function(el) {
      let vm = this;
      let clipboard = new this.clipboard(el);
      clipboard.on("success", function() {
        vm.utils.fnMsg("复制成功");
      });
      clipboard.on("error", function() {
        vm.utils.fnMsg("复制失败");
      });
    },
  },
};
</script>
<style scoped>
body,
html {
  background-color: #f5f5f5;
}

#main {
  padding-bottom: 50px;
}

.back {
  position: fixed;
  left: 0;
  z-index: 99;
}

.back .back-cont {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
}

.banner .slide-img {
  width: 100%;
  height: 350px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.banner .slide-img .all-red {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
  background-color: rgba(247, 57, 87, .7);
  border-radius: 0 0 0 26px;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  width: 90px;
}

.banner .slide-img .all-red i {
  font-size: 24px;
}

.banner .slide-img .all-red span {
  font-size: 16px;
  padding-left: 10px;
}

.banner .swiper-container {
  --swiper-pagination-color: var(--pink);
}

div.content .top {
  border-bottom: 1px solid #eee;
}

div.content .top .name {
  padding-bottom: 15px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

div.content .top .name img {
  width: 18px;
  height: 18px;
}

div.content .bottom {
  padding: 15px;
  margin-bottom: 10px;
}

.tab .tab_top {
  height: 36px;
  line-height: 36px;
}

.tab .tab_top .item {
  border-bottom: 1px solid #eee;
}

.tab .tab_top .item.active {
  color: var(--pink) !important;
  border-bottom-color: var(--pink);
}

.tab .tab_record {
  padding: 15px 15px 15px 5px;
}

.tab .tab_record .item {
  padding: 0 0 10px 10px;
}

.tab .tab_record .item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.tab .tab_cont .tab_desc .title {
  font-size: 14px;
}

.tab .tab_cont .tab_desc .desc {
  font-size: 14px;
  max-height: 100%;
  line-height: 30px;
}

.tab .sign {
  padding: 50px 25px;
}

.tab .sign .login_btn,
.tab .sign .register_btn {
  width: 100px;
  height: 36px;
  line-height: 36px;
  border-radius: 4px;
  margin: auto;
}

.tab .sign .login_btn {
  border: 1px solid var(--pink);
}

.fixed {
  z-index: 1100;
  transform: translateZ(0);
}

.fixed .content {
  height: 50px;
  line-height: 50px;
}

.fixed .content .btn {
  height: 50px;
  line-height: 50px;
  border-radius: 0;
  font-size: 16px;
  max-height: 100%;
}

.fixed .content .lt {
  background-color: #444;
  padding-left: 20px;
}

.fixed .content .time_btn {
  background-color: #000;
}
.van-count-down {
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-size: 16px;
}

.sz_taobao .bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
}

.sz_taobao .sz_taobao_content {
  position: fixed;
  top: 50%;
  right: 10%;
  left: 10%;
  z-index: 101;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #fff;
  border-radius: 6px;
}

.sz_taobao .sz_taobao_content .title {
  height: 36px;
  line-height: 36px;
  border-radius: 6px 6px 0 0;
}

.sz_taobao .sz_taobao_content .content .choose-item {
  border-bottom: 1px solid #eee;
}

.sz_taobao .sz_taobao_content .content .add_btn {
  border-radius: 4px;
  padding: 0 10px;
  margin-top: 10px;
}

.sz_taobao .sz_taobao_content .bb .btn {
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #eee;
}

.sz_taobao .sz_taobao_content .bb .confirm_btn {
  border-radius: 0 0 0 5px;
}

.sz_taobao .sz_taobao_content .bb .close_btn {
  border-radius: 0 0 5px 0;
}
</style>
